<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算和侦听属性</title>
    <script src="js/vue.global.js"></script>
    <style>
        input[type=text]{
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    {{a_money}} 美元-----{{p_money}}人民币
    <br>
    <input type="text" v-model="a_money">美元

    <br>
    <input type="password" v-model="password"><br>
    <p>{{password}}</p>
    <p>{{password2}}</p>
</div>
<script>
    var vm =Vue.createApp({
        data(){
            return{
                a_money:0,
                rate:7,
                password2: ''
            }
        },
        //计算属性，实际上而言，这里的每一个方法最终对于html都是一个变量，
        // 这个变量在已有的变量基础上计算得到的，有一个缓存的作用
        // computed:{
        //     p_money(){
        //         return (this.a_money*this.rate).toFixed(2)
        //     }
        // }
        computed:{
            p_money:{
                get(){
                    return (this.a_money*this.rate).toFixed(2)
                }
            },
            password:{
                get(){
                    return atob(this.password2)
                },
                set(data){
                   this.password2 =  btoa(data)
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>